<template>
  <div class="terminal-approval-container">
    <!-- 顶部筛选卡片 -->
    <t-card class="filter-card">
      <div class="filter-tabs">
        <t-tabs :value="activeTab" @change="onTabChange">
          <t-tab-panel value="all" label="全部" />
          <t-tab-panel value="hunan" label="湖南省" />
          <t-tab-panel value="sichuan" label="四川省" />
        </t-tabs>
        <div class="search-area">
          <t-input placeholder="请输入你需要搜索的内容" clearable class="search-input">
            <template #suffix>
              <t-icon name="search" size="20px" />
            </template>
          </t-input>
        </div>
      </div>
    </t-card>

    <!-- 表格卡片 -->
    <t-card class="table-card">
      <div class="terminal-approval">
        <!-- 订单表格 -->
        <t-table row-key="id" :data="orderList" :columns="columns" :hover="true" :pagination="pagination"
          @page-change="onPageChange" :row-className="tableRowClass">
          <template #checkboxCol="{ row }">
            <t-checkbox v-model="row.checked" />
          </template>

          <template #cardNo="{ row }">
            <span>{{ row.cardNo }}</span>
          </template>

          <template #applyTime="{ row }">
            <span>{{ row.applyTime }}</span>
          </template>

          <template #applyVolume="{ row }">
            <span>{{ row.applyVolume }}</span>
          </template>

          <template #status="{ row }">
            <t-tag :theme="getStatusTheme(row.status)" variant="light">
              {{ row.status }}
            </t-tag>
          </template>

          <template #proof="{ row }">
            <span>{{ row.proof }}</span>
          </template>

          <template #operation="{ row }">
            <t-button theme="primary" variant="text" @click="viewDetail(row)">详情</t-button>
          </template>
        </t-table>
      </div>
    </t-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { MessagePlugin, TabValue, PrimaryTableCol } from 'tdesign-vue-next';

interface OrderItem {
  id: string;
  checked: boolean;
  cardNo: string;
  applyTime: string;
  applyVolume: string;
  status: string;
  proof: string;
}

const router = useRouter();

// 标签页
const activeTab = ref<TabValue>('all');

// 表格列配置
const columns = ref<PrimaryTableCol<OrderItem>[]>([
  { colKey: 'checkbox', type: 'multiple', width: 64, fixed: 'left' },
  { colKey: 'cardNo', title: '卡号', width: 180 },
  { colKey: 'applyTime', title: '申请时间', width: 180 },
  { colKey: 'applyVolume', title: '申请数量', width: 180 },
  { colKey: 'status', title: '审核状态', width: 120 },
  { colKey: 'proof', title: '凭证', width: 120 },
  { colKey: 'operation', title: '操作', width: 120 }
]);

// 订单数据
const orderList = ref<OrderItem[]>([]);

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 101,
  pageSizeOptions: [5, 10, 20, 50],
  showJumper: true,
  showPageSize: true,
  onChange(pageInfo: { current: number; pageSize: number }) {
    pagination.current = pageInfo.current;
    pagination.pageSize = pageInfo.pageSize;
    fetchOrderList();
  },
});

// 标签页切换
const onTabChange = (value: TabValue) => {
  activeTab.value = value;
  fetchOrderList();
};

// 获取订单列表数据
const fetchOrderList = () => {
  // 模拟订单数据
  const mockData: OrderItem[] = [];
  for (let i = 0; i < 12; i++) {
    // 为了展示不同状态的数据
    let status;
    let proof;

    if (i % 4 === 0) {
      status = '提交中';
      proof = '提交中';
    } else if (i % 4 === 1) {
      status = '待审核';
      proof = '查看凭证';
    } else if (i % 4 === 2) {
      status = '已拒绝';
      proof = '查看凭证';
    } else {
      status = '审核通过';
      proof = '查看凭证';
    }

    mockData.push({
      id: `${(pagination.current - 1) * pagination.pageSize + i + 1}`,
      checked: false,
      cardNo: '34531877441314',
      applyTime: '2025/03/14 13:23',
      applyVolume: '19000.000KG',
      status,
      proof,
    });
  }
  orderList.value = mockData;
};

// 页面变化
const onPageChange = (pageInfo: { current: number; pageSize?: number }) => {
  pagination.current = pageInfo.current;
  if (pageInfo.pageSize) {
    pagination.pageSize = pageInfo.pageSize;
  }
  fetchOrderList();
};

// 根据状态获取标签主题
const getStatusTheme = (status: string) => {
  switch (status) {
    case '提交中':
      return 'default';
    case '待审核':
      return 'warning';
    case '已拒绝':
      return 'danger';
    case '审核通过':
      return 'success';
    default:
      return 'default';
  }
};

// 查看详情
const viewDetail = (row: OrderItem) => {
  router.push({
    path: `/terminal/approval/detail/${row.id}`,
    query: {

      status: row.status
    }
  });
};

// 设置行样式类
const tableRowClass = ({ row }: { row: OrderItem }): string => {
  return '';
};

onMounted(() => {
  fetchOrderList();
});
</script>

<style lang="less" scoped>
.terminal-approval-container {
  width: 100%;

  .filter-card {
    margin-bottom: 16px;

    .filter-tabs {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .search-area {
        .search-input {
          width: 300px;
        }
      }
    }
  }

  .table-card {
    .terminal-approval {
      width: 100%;
    }
  }
}
</style>